import React, { Component, Suspense } from 'react'
import { HashRouter } from 'react-router-dom'
import { ConfigProvider, Select, Spin } from 'antd'
import zh_CN from 'antd/lib/locale-provider/zh_CN'
import './App.scss'
import { withRouter, Switch } from 'react-router'
import { UdLayout, UdSidebar, UdMain, UdMenu, routeUtils, UdRouterFallback, uaaApp } from './lib/index'
import { menuExtraPaths } from './config/menus'
import UdMainHeader from './components/UdMainHeader'
import UdMainHeaderRight from './components/UdMainHeaderRight'
import { Provider } from "mobx-react";
import Stores from "@/store";
import UdSidebarTitle from "@components/UdSidebarTitle";
import UdMainHeaderTitle from '@components/UdMainHeaderTitle'

const Menu = withRouter(UdMenu)

class App extends Component {

  constructor(props: {}) {
    super(props)
  }

  public render() {

    return (
      <ConfigProvider locale={zh_CN}>
        <HashRouter>
          <Provider {...Stores}>
            <UdLayout>
              <UdSidebar title={<UdSidebarTitle appName={uaaApp.appName} />}>
                <Menu menus={uaaApp.menus} extraPaths={menuExtraPaths} />
              </UdSidebar>
              <UdMain>
                <UdMainHeader>
                  <UdMainHeaderTitle appName={uaaApp.appName} />
                  <UdMainHeaderRight />
                </UdMainHeader>
                <div className="ud-main-content">
                  <Suspense fallback={<UdRouterFallback />}>
                    <Switch>
                      {routeUtils.buildRouteNodes(uaaApp.routes)}
                    </Switch>
                  </Suspense>
                </div>
              </UdMain>
            </UdLayout>
          </Provider>
        </HashRouter>
      </ConfigProvider>
    )
  }

}

export default App
